{include file="public/header"}
<!-- 页体 -->
<div class="mdui-container">

    <!-- 标题组件 -->
    <div class="mdui-row">
        <div class="mdui-col-xs-6">
            <h1 class="mdui-text-color-theme mdui-p-t-2">{$ViewTitle}</h1>
        </div>
        <div class="mdui-col-xs-6">
            <button class="mdui-m-t-4 mdui-float-right mdui-btn mdui-btn-raised mdui-color-theme-accent mdui-ripple"
                mdui-dialog="{target: '#dialogAdd'}">添加用户</button>
            <!-- 弹窗组件 -->
            <div class="mdui-dialog" id="dialogAdd">
                <div class="mdui-dialog-title">添加用户</div>
                <div class="mdui-row mdui-p-x-4">
                    <div class="mdui-row">
                        <div class="mdui-col-xs-9 mdui-col-md-10">
                            <div class="mdui-textfield">
                                <label class="mdui-textfield-label">用户名</label>
                                <input class="mdui-textfield-input" id="addUserDataName" type="text" />
                            </div>
                        </div>
                        <div class="mdui-col-xs-3 mdui-col-md-2">
                            <label class="mdui-textfield-label mdui-m-t-2">权限</label>
                            <select class="mdui-select" id="addUserDataPower">
                                <option value="0">站长</option>
                                <option value="1">管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">密码</label>
                        <input class="mdui-textfield-input" id="addUserDataPassword" type="password" />
                    </div>
                </div>

                <div class="mdui-dialog-actions">
                    <button class="mdui-btn mdui-ripple" id="btnAddUser" mdui-dialog-close>确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主体组件 -->
    <div class="mdui-card mdui-p-a-2">
        <div class="mdui-table-fluid mdui-shadow-0 mdui-m-b-1">

            <table class="mdui-table mdui-typo">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>权限</th>
                        <th class="mdui-table-col-numeric">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name='CommonNowList' id='data'}
                    <tr>
                        <td>{$data.id}</td>
                        <td>{$data.userName}</td>
                        <td value="{$data.power}">
                            <div class="mdui-chip">
                                <span class="mdui-chip-title">
                                    {switch $data.power}
                                    {case 0}站长{/case}
                                    {case 1}管理员{/case}
                                    {default /}未知
                                    {/switch}
                                </span>
                            </div>
                        </td>
                        <td>
                            <button class="js-Btn-Edit mdui-btn mdui-btn-icon" mdui-dialog="{target: '#dialogedit'}">
                                <i class="mdui-icon material-icons">edit</i>
                            </button>
                            <button class="js-Btn-Delete mdui-btn mdui-btn-icon">
                                <i class="mdui-icon material-icons">delete</i>
                            </button>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>

        </div>
        <!-- 分页按钮组件 -->
        {include file="public/easyPaging"}
    </div>

    <!-- 弹窗组件 -->
    <div class="mdui-dialog" id="dialogedit">
        <div class="mdui-dialog-title">编辑用户</div>
        <div class="mdui-row mdui-p-x-4">
            <div class="mdui-row">
                <div class="mdui-col-xs-9 mdui-col-md-10">
                    <div class="mdui-textfield">
                        <label class="mdui-textfield-label">用户名</label>
                        <input class="mdui-textfield-input" id="editUserDataName" type="text" />
                    </div>
                </div>
                <div class="mdui-col-xs-3 mdui-col-md-2">
                    <label class="mdui-textfield-label mdui-m-t-2">权限</label>
                    <select class="mdui-select" id="editUserDataPower" style="width: 100%;">
                        <option value="0">站长</option>
                        <option value="1">管理员</option>
                    </select>
                </div>
            </div>
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">密码</label>
                <input class="mdui-textfield-input" id="editUserDataPassword" type="password" placeholder="不填默认不修改" />
            </div>
        </div>

        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" id="btnEditUser" mdui-dialog-close>确定</button>
        </div>
    </div>


</div>
{include file="public/footer"}

<script>

    let IndexEntity = new Index();

    $(function () {
        //初始化-分页组件
        pager();

        //按钮-删除
        $('.js-Btn-Delete').click(function () {
            const id = $(this).parent().siblings('td:first').html()
            IndexEntity.PostDelete(id);
        });

        //按钮-初始化-编辑
        $('.js-Btn-Edit').click(function () {
            var thisObj = $(this).parent().siblings('td');
            $('#editUserDataName').val(thisObj.eq(1).html());
            $('#editUserDataPower').val(thisObj.eq(2).attr('value'));
            $('#btnEditUser').val(thisObj.eq(0).html());
        });

        const getEditData = () => {
            return {
                'id': $('#btnEditUser').val(),
                'userName': $('#editUserDataName').val(),
                'password': $('#editUserDataPassword').val(),
                'power': $('#editUserDataPower').val()
            };
        }
        const getAddData = () => {
            return {
                'userName': $('#addUserDataName').val(),
                'password': $('#addUserDataPassword').val(),
                'power': $('#addUserDataPower').val()
            };
        }

        $('#btnEditUser').click(() => {
            IndexEntity.PostEdit(getEditData());
        });
        $('#btnAddUser').click(() => {
            IndexEntity.PostAdd(getAddData());
        });
    })
</script>
</body>

</html>